<!--
 * @Author: ‘陈宗泺’ ‘1335450872@qq.com’
 * @Date: 2024-05-23 23:32:28
 * @LastEditors: ‘陈宗泺’ ‘1335450872@qq.com’
 * @LastEditTime: 2024-05-24 03:51:55
 * @FilePath: \ca-web-front\vue\src\views\front\ucenter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div id="content-ucenter">
        <div class="user">
            
      <div class="user-info">
        <div class="avatar">
            <img :src="user.avatar" alt="">
            <div class="info">
                <span class="name">{{ user.realName }}</span ><i icon="el-icon-user-solid" ></i><br>
                <span>{{ personalIntro }}</span><i icon="el-icon-user-solid" ></i>   
            </div>
        </div>
       
        <div class="user-setting">
            <img src="@/assets/imgs/123.png" alt="" style="width: 30px;">
            <a href="/front/person" style="margin-top:5px">个人信息</a>
        </div>
      </div>
      <div id="introduce">
        <h2 >个人介绍</h2>
        <div v-if="editing">
        <textarea id="personalIntro" v-model="personalIntro" placeholder="请输入您的个人介绍..."></textarea>
        <button @click="savePersonalIntro">保存</button>
        </div>
        <div v-else>
        <p>{{ personalIntro }}</p>
        <button @click="editPersonalIntro" class="btn">编辑</button>
        </div>
  </div>
  <el-tabs type="border-card" class="order">
    <el-tab-pane label="我的维修单">
      等待上线，敬请期待
    </el-tab-pane>
    <el-tab-pane label="待处理">等待上线，敬请期待</el-tab-pane>
    <el-tab-pane label="已结单">等待上线，敬请期待</el-tab-pane>
    <el-tab-pane label="已完成">等待上线，敬请期待</el-tab-pane>
</el-tabs>
</div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'UserCenter',
    data() {
      return {
        editing: false,
        user: JSON.parse(localStorage.getItem("xm-user") || '{}'),
        personalIntro: '这个家伙很懒，什么也没有留下',
        personalSetting: '这个人很懒，什么都没写',
        todo: 0,
        apply: 0,
        done: 0,
        activeName: 'second',
        name:'用户名',
      };
    },
    methods: {
        editPersonalIntro: function() {
          this.editing = true;
        },
        savePersonalIntro: function() {
          this.editing = false;
        }
      }
  };
  </script>
  
  <style scoped>
  #content-ucenter {
    width: 80%;
    margin: 0 auto;
}
.user{
    width: 100%;
    height: 100%;
    margin: 20px;
    border: #ddd 1px solid;
    border-radius: 5px;
}
  .header {
    background-color: #f2f2f2;
    padding: 10px;
    text-align: center;
  }
  .user-info {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;background-image: url('@/assets/imgs/bj.png');
  }
  .user-info h2 {
    margin-top: 0;
  }
  .user-info p {
    margin: 5px 0;
  }
  .user-stats {
    list-style: none;
    padding: 0;
  }
  .user-stats li {
    margin: 5px 0;
  }
  .avatar {
      display: flex;
      margin-bottom: 10px;
      border-radius: 50%;position: relative;
      top: 70%;
  }
  .avatar img{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  .info{
    margin: 10px;
  }
  .name{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .user-setting
  {
    display: flex;
    margin: 10px;
    position: relative;
    top: 41%;
    left: 90%;
    border-radius: 5px;
    border: #ddd 1px solid;
    background-color:rgb(233 233 233 / 32%);
    width: 100px;
    height: 30px;

  }
 #introduce{
    padding: 20px;
    border-radius: 5px;
    border: #ddd 1px solid;
    background-color:rgb(233 233 233 / 32%);
    
 }
 #introduce button{
    position: relative;

    border-radius: 5px;
    border: #4290da 1px solid;
    color: #4290da;
    padding: 5px;
    margin: 10px;

}
 #personalIntro{
    width: 80%;
    height: 100px;  
}
.btn {
    position: relative;
    left: 0;
    margin: 10px;

}
.order{
    width: 100%;
    height: 250px;
    margin-top: 20px;
}
h2{margin-bottom: 10px;}
  </style>